<template>
  <div>
    <!--<p>click：{{ $store.state.count }} times ,count is ：{{ $store.getters.odd }}</p>-->

    <!-- 简写 -->
    <p>click：{{ count }} times ,count is ：{{ odd }}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">increment if odd</button>
    <button @click="incrementAsync">decrement async</button>
  </div>
</template>

<script>
import {mapState, mapActions,mapGetters} from 'vuex'
export default {
  name: 'App',
  components: {},
  props: {},
  data() {
    return {
      // count: 0
    };
  },
  methods: {
    // 简写 方法
    ...mapActions(['increment','decrement','incrementOdd','incrementAsync'])

    /*increment() {
      // this.count = this.count + 1;
      this.$store.dispatch("increment")
    },
    decrement() {
      // this.count = this.count - 1;
      this.$store.dispatch("decrement")
    },
    incrementOdd() {
     /!* if (this.count % 2 === 0) {
        this.count = this.count + 1;
      }*!/
      this.$store.dispatch("incrementOdd")
    },
    incrementAsync() {
      this.$store.dispatch("incrementAsync")
      /!*setTimeout(() => {
        this.count = this.count + 1;
      }, 1000);*!/
    }*/
  },
  computed: {
    // 简写 计算属性
    ...mapState(['count']),
    ...mapGetters(['odd'])

  /*  odd() {
      return this.count % 2 === 0 ? '偶数' : '奇数';
    }*/
  }
};
</script>

<style scoped>

</style>
